<!DOCTYPE HTML>
<html>
<head>
	<title>测试页面 - 二手电子乐园</title>
	<meta charset="utf-8" />
	<style>
		body { font-family: Arial, sans-serif; padding: 20px; }
		.test-section { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
		.test-result { margin-top: 10px; padding: 10px; border-radius: 4px; }
		.success { background-color: #d4edda; color: #155724; }
		.error { background-color: #f8d7da; color: #721c24; }
		.info { background-color: #d1ecf1; color: #0c5460; }
	</style>
</head>
<body>
	<h1>二手电子乐园 - 功能测试页面</h1>
	
	<div class="test-section">
		<h2>1. 数据加载测试</h2>
		<button onclick="testDataLoading()">测试数据加载</button>
		<div id="dataTest" class="test-result"></div>
	</div>
	
	<div class="test-section">
		<h2>2. 分类筛选测试</h2>
		<button onclick="testCategoryFilter()">测试分类筛选</button>
		<div id="categoryTest" class="test-result"></div>
	</div>
	
	<div class="test-section">
		<h2>3. 页面导航测试</h2>
		<div>
			<a href="index.html" target="_blank">首页</a> |
			<a href="category.html?type=phone" target="_blank">二手手机</a> |
			<a href="category.html?type=camera" target="_blank">二手相机</a> |
			<a href="category.html?type=digital" target="_blank">二手数码</a> |
			<a href="category.html?type=fridge" target="_blank">二手冰箱</a> |
			<a href="product-detail.html?id=1" target="_blank">产品详情</a> |
			<a href="login.html" target="_blank">登录注册</a> |
			<a href="vip.html" target="_blank">VIP特权</a> |
			<a href="about.html" target="_blank">关于我们</a>
		</div>
	</div>
	
	<div class="test-section">
		<h2>4. 登录功能测试</h2>
		<p>测试账户：用户名 <code>zhangsan</code>，密码 <code>66666666</code></p>
		<button onclick="testLogin()">测试登录状态</button>
		<div id="loginTest" class="test-result"></div>
	</div>

	<script src="utils/loader.js"></script>
	<script>
		window.addEventListener('scriptsLoaded', function() {
			console.log('脚本加载完成，开始测试');
		});
		
		function testDataLoading() {
			const resultDiv = document.getElementById('dataTest');
			
			try {
				if (!window.siteData) {
					throw new Error('window.siteData 未定义');
				}
				
				const featuredCount = window.siteData.featuredProducts ? window.siteData.featuredProducts.length : 0;
				const recommendedCount = window.siteData.recommendedProducts ? window.siteData.recommendedProducts.length : 0;
				const companyInfo = window.siteData.companyInfo ? '已加载' : '未加载';
				
				resultDiv.className = 'test-result success';
				resultDiv.innerHTML = `
					<strong>✓ 数据加载成功</strong><br>
					精选产品数量: ${featuredCount}<br>
					推荐产品数量: ${recommendedCount}<br>
					公司信息: ${companyInfo}
				`;
			} catch (error) {
				resultDiv.className = 'test-result error';
				resultDiv.innerHTML = `<strong>✗ 数据加载失败:</strong> ${error.message}`;
			}
		}
		
		function testCategoryFilter() {
			const resultDiv = document.getElementById('categoryTest');
			
			try {
				if (!window.siteData || !window.siteData.featuredProducts) {
					throw new Error('产品数据未加载');
				}
				
				const allProducts = [
					...window.siteData.featuredProducts,
					...window.siteData.recommendedProducts
				];
				
				const categories = {
					phones: allProducts.filter(p => p.category === 'phones').length,
					cameras: allProducts.filter(p => p.category === 'cameras').length,
					digital: allProducts.filter(p => p.category === 'digital').length,
					refrigerators: allProducts.filter(p => p.category === 'refrigerators').length
				};
				
				resultDiv.className = 'test-result success';
				resultDiv.innerHTML = `
					<strong>✓ 分类筛选测试成功</strong><br>
					手机类产品: ${categories.phones} 个<br>
					相机类产品: ${categories.cameras} 个<br>
					数码类产品: ${categories.digital} 个<br>
					冰箱类产品: ${categories.refrigerators} 个<br>
					总计: ${Object.values(categories).reduce((a, b) => a + b, 0)} 个
				`;
			} catch (error) {
				resultDiv.className = 'test-result error';
				resultDiv.innerHTML = `<strong>✗ 分类筛选测试失败:</strong> ${error.message}`;
			}
		}
		
		function testLogin() {
			const resultDiv = document.getElementById('loginTest');
			const isLoggedIn = localStorage.getItem('isLogin') === 'true';
			const username = localStorage.getItem('username');
			
			if (isLoggedIn) {
				resultDiv.className = 'test-result success';
				resultDiv.innerHTML = `<strong>✓ 用户已登录</strong><br>用户名: ${username}`;
			} else {
				resultDiv.className = 'test-result info';
				resultDiv.innerHTML = '<strong>ℹ 用户未登录</strong><br>请前往登录页面测试登录功能';
			}
		}
	</script>
</body>
</html>
